<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<script>
       (function (doc, win) {
	        var docEl = doc.documentElement,
	        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
	        recalc = function () {
	          var clientWidth = docEl.clientWidth;
	          if (!clientWidth) return;
	          docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
	        };

	      if (!doc.addEventListener) return;
	      win.addEventListener(resizeEvt, recalc, false);
	      doc.addEventListener('DOMContentLoaded', recalc, false);
	    })(document, window);
	</script>
	<link rel="stylesheet" href="css/reset.css">
	<style>

		html{
		    height: 100%;
		    width: 100%;
		    font-size:20px;/* 1rem */
		}
		.wrap {
		  width: 16rem;
		  height: 28.4rem;
		  overflow: hidden;
		}
		.wrap ul {
		  width: 112rem;// 7张图片，每张16rem宽
		  height: 28.4rem;
		  list-style: none;
		  margin-left: 0;
		  position: relative;
		}
		.wrap ul .img {
		  width: 16rem;
		  height: 28.4rem;
		  float: left;
		  background-size: cover;
		}
		.img-1 {
		  background: url("img/1.jpg") no-repeat;
		}
		.img-2 {
		  background: url("img/1.jpg") no-repeat;
		}
		.img-3 {
		  background: url("img/1.jpg") no-repeat;
		}
		.img-4 {
		  background: url("img/1.jpg") no-repeat;
		}
		.img-5 {
		  background: url("img/1.jpg") no-repeat;
		}
		.img-6 {
		  background: url("img/1.jpg") no-repeat;
		}
		.img-7 {
		  background: url("img/1.jpg") no-repeat;
		}

	</style>
</head>
<body>
	<div class="wrap" id="J-wrap">
	    <ul id="J-ul">
	        <li class="img img-1"></li>
	        <li class="img img-2"></li>
	        <li class="img img-3"></li>
	        <li class="img img-4"></li>
	        <li class="img img-5"></li>
	        <li class="img img-6"></li>
	        <li class="img img-7"></li>
	    </ul>
	</div>
	
</body>
<script src="js/jquery-3.1.1.min.js"></script>
<script>
	$(function () {
        document.getElementById("J-wrap").addEventListener('touchstart', touchStart);
        document.getElementById("J-wrap").addEventListener('touchmove', touchMove);
        document.getElementById("J-wrap").addEventListener('touchend', touchEnd);

    });
    // x y为点击的x y坐标，n为滑动的距离，no为图片的次序
     var x = 0, y = 0, isMove = false, n = 0, no = 1;
     function touchStart(e) {
        isMove = true;
        x = e.touches[0].pageX;
        y = e.touches[0].pageY;
    }
    function touchMove(e) {
        if (Math.abs(e.touches[0].pageX - x)>(Math.abs(e.touches[0].pageY - y))){
            isMove = true;
            n = e.touches[0].pageX - x;
            e.preventDefault();
        }else{
            isMove = false;
            n = 0;
        }
    }
    function touchEnd(e) {
        if(n<=-10){
            isMove = false;
            if(no<7){
                $('#J-ul').animate({left:"-"+(no*16)+"rem"},400);
                no += 1;
            }
            n=0;
        if(n>=10){
            isMove = false;
        }
            if(no>1){
                $('#J-ul').animate({left:"-"+((no-2)*16)+"rem"},400);
                no-=1;
            }else if(no==1){
                $('#J-ul').animate({left:"-"+((no-1)*16)+"rem"},400);
            }
            n=0;
        }
    }
</script>
</html>